<template>
  <div class="album">
    <div class="hotSongs">
      <div class="img">
        <img src="../../../assets/images/hotSongs.png" />
      </div>
      <div class="songslist">
        <p>热门50首</p>
        <el-table :data="hotSongslist" stripe fit style="width: 100%" :show-header="false" @row-dblclick="playMusic">
          <el-table-column type="index" width="50" align="center"></el-table-column>
          <el-table-column prop="name" ></el-table-column>
          <el-table-column prop="dt" width="80"></el-table-column>
        </el-table>
        <span class="all" @click="showAll" v-show="show">查看全部50首></span>
      </div>
    </div>
  </div>
</template>

<script>
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
import { timeFormat } from '../../common/util.js'
export default {
  props: ['hotSongs'],
  data () {
    return {
      id: 0,
      hotSongslist: [],
      show: true
    }
  },
  methods: {
    // 播放音乐
    playMusic (row) {
      // console.log(row.mainTrackId)
      this.getMusicUrl(row.id)
      this.getMusicMenu(row.id)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    },
    showAll () {
      this.show = false
      this.hotSongslist = this.hotSongs
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
  },
  watch: {
    hotSongs () {
      this.hotSongs.forEach(item => {
        item.dt = timeFormat(item.dt)
      })
      // console.log(this.hotSongs)
      this.hotSongslist = this.hotSongs.slice(0, 10)
    }
  }
}
</script>

<style lang="less" scoped>
  .album {
    width: 100%;
    .hotSongs {
      width: 100%;
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      .img {
        width: 25%;
        img {
          width: 100%;
        }
      }
      .songslist {
        width: 70%;
        p {
          margin-bottom: 5px;
        }
        .el-table {
          border: 1px solid #e1e1e2;
          margin-bottom: 5px;
        }
        .all {
          color: #888888;
          cursor: default;
        }
        .all:hover {
          color: #666666;
        }
      }
    }
  }
</style>
